<template>
    <div id="shop">        
        <div class="shop-header">
            <mt-header :title="heaedrMsg">
                <mt-button icon="back" slot="left" @click="() => setState({homePage: 'home'})">
                    返回
                </mt-button>
                <mt-button icon="more" slot="right" @click="() =>{
                    showMusicOpation = !showMusicOpation}"></mt-button>
            </mt-header>
        </div>  

        <div class="music-seach-input">
            <input type="seach" placeholder="只能搜电脑、袜子、衣服" v-model="keyWord">
            <p class="music-seach-btn" @click="get">搜索</p>
        </div>

        <div class="shop-content">
            <div class="shop-item" v-for="(item, index) in shops" :key="index">
                <!-- 图片 -->
                <div class="shop-poster">
                    <img :src="item.goodImg" alt="">
                </div>
                <!-- 信息 -->
                <div class="shop-info">
                    <!-- 描述 -->
                    <div class="shop-desc">
                        <a>{{item.goodDesc}}</a>
                    </div>
                    <!-- 价格 -->
                    <div class="shop-price-commit">
                        <i>￥</i>
                        <span class="shop-price">{{item.goodPrice}}</span>
                        <a class="shop-commit">{{ item.goodCommit}}</a>
                    </div>

                    <!-- 商店名字 -->
                    <div class="shop-name">
                        <a href="">{{item.goodShop}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { mapMutations, mapState} from 'vuex'
export default {
    data(){
        return{
            heaedrMsg: '商城',
            shops: [],
            keyWord: ''
        }
    },
    computed:{
        ...mapState([
            'musicIndex'
        ])
    },
    methods:{
        ...mapMutations([
            'setState',
            'IndicatorInfo'
        ]),
        get(){
        //获取数据
        let page = 0
        let limit = 10
        page++
        const keyWord = this.keyWord
        axios({
            method: 'get',
            url: 'http://localhost:3003/findShop',
            params:{
                keyWord,
                page,
                limit
            }
        })
            .then((res) =>{

                this.shops = res.data.shop[0].shops
                console.log(res.data.shop)
            })
    },
    },
    mounted(){
       
    },
    filters:{
       
    }
}
</script>
<style lang="less" scoped>

     //搜索框
    .music-seach-input{
        position: fixed;
        top: 40px;
        padding: 5px 10px 0;
        width: 100%;
        height: 30px;
        margin-bottom: 15px;
        box-sizing: border-box;
        display: flex;
        z-index: 10;
        > input{
            flex: 4;
            height: 100%;
            text-indent: 20px;
            opacity: 0.7;
            // background-color: #9DDBE2;
        }
        > .music-seach-btn{
            flex: 2;
            height: 30px;
            text-align: center;
            line-height: 30px;
            margin: 0;
            background: #2BA2FA;
            color: #fff;
            opacity: 0.7;
        }
    }

    //内容
    .shop-content{
        margin-top: 80px;
       .shop-item{
           display: flex;
           margin: 10px 0;
          .shop-poster{
              flex: 1;
              padding: 5px;
              > img{
                  width: 100%;
              }
          } 

          .shop-info{
              flex: 2;
              padding-left: 5px;
              .shop-desc{
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #666;
              }
              .shop-price-commit{
                  width: 100%;
                  .shop-commit{
                     margin-left: 50px;
                  }
              }
          }
       }
    }

</style>


